
const stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.dom)

const setting = {
    particleNum: 60,
    distance: 200
}

function Particle() {
    this.x = 0
    this.y = 0
    this.dx = 0
    this.dy = 0
    this.size = 0
    this.hue = 10

    this.draw = function () {
        noStroke()//调用了line好像会自动打开绘制边框,即使setup里设置了nostroke()
        // fill(this.hue, 100, 100)
        // circle(this.x, this.y, this.size)
    }

    this.update = function () {
        this.x += this.dx
        this.y += this.dy
        if (this.x < 0 || this.x > width) {
            this.dx *= -1
        }
        if (this.y < 0 || this.y > height) {
            this.dy *= -1
        }
        this.draw()
    }
}

let particles = []

function initParticles() {
    particles = []
    for (let i = 0; i < setting.particleNum; i++) {
        const p = new Particle()
        p.hue = floor(random(100))
        p.x =floor(random(100, width - 100))
        p.y =floor(random(100, height - 100))
        p.size = floor(random(2, 5))
        p.dx =random(-0.9, 0.9)
        p.dy =random(-0.9, 0.9)
        particles.push(p)
    }
}

function drawLine(p1, p2) {
    const distance = dist(p1.x,p1.y,p2.x,p2.y)
    if (distance < setting.distance) {
        const alpha = floor(map(distance, 0, setting.distance, 100, 0))
        stroke(p2.hue, 100, 100, alpha)
        strokeWeight(2)
        line(p1.x, p1.y, p2.x, p2.y)
    }
}

function setup() {
    createCanvas(innerWidth, innerHeight)
    frameRate(60)
    colorMode(HSB, 100)
    noStroke()
    initParticles()
}


function draw() {
    stats.begin()
    clear()
    background(0)
    // background(0,0.5)
    for (let i = 0; i < particles.length-1; i++) {
        particles[i].update()
        drawLine({x:mouseX,y:mouseY},particles[i])
        for (let j = i + 1; j < particles.length; j++) {
            drawLine(particles[i], particles[j])
        }
    }
    stats.end()
}